/* eslint-disable @typescript-eslint/no-unused-vars */
import ControlDrawer from '@/pages/ThreeJs/components/ControlDrawer';
import { state } from '@/store/three-control';
import { ICarmera } from '@/types/threeJs';
import { Button } from 'antd';
import { createRef, useEffect } from 'react';
import * as THREE from 'three';
import { useSnapshot } from 'umi';
import styles from './index.less';

export default function Page() {
  const controlDrawerRef: any = createRef<any>();
  const cameraStateSnap: any = useSnapshot(state.camera);
  let camera: any;
  let renderer: any;
  let scene: any;
  const openDrawer = () => {
    if (controlDrawerRef.current) {
      controlDrawerRef.current.setOpen(true);
    }
  };

  const onResize = () => {
    window.addEventListener(
      'resize',
      function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        console.log('camera.aspect:', camera.aspect);
        camera.updateProjectionMatrix();
        renderer.render(scene, camera);
      },
      false,
    );
  };
  const initThree = (cameraParams: ICarmera): any => {
    console.log('initThree');
    //场景
    scene = new THREE.Scene();
    // 相机：
    // fov:眼球张开的角度，0°时相当于闭眼。
    // aspect:可视区域横纵比。
    // near:眼睛能看到的最近垂直距离。
    // far：眼睛能看到的最远垂直距离
    const { fov, aspect, near, far } = cameraParams;
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 5;

    // 渲染器
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(1000, 800);
    let dom: any = document.getElementById('three-demo1-scene');
    dom.appendChild(renderer.domElement);

    // 几何体
    let geometry = new THREE.BoxGeometry(2, 2, 2);

    // 材质
    let material = new THREE.MeshBasicMaterial({
      color: 0xffff00,
    });

    // 物体
    let cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }

    animate();
  };
  const rerenderCube = (newCameraData: any) => {
    console.log('rerender:', newCameraData);
    console.log('rerender:', newCameraData);

    const { fov, aspect, near, far } = newCameraData;
    console.log('camera:', fov, aspect, near, far);
    camera.aspect = aspect;
    camera.fov = fov;
    camera.near = near;
    camera.far = far;
    camera.updateProjectionMatrix();
    renderer.render(scene, camera);

    // // //变更后必须使用以下方法更新相机的投影矩阵
    // camera.updateProjectionMatrix();
    // console.log('camera new:', camera.fov, camera.aspect, camera.near, camera.far )
    // renderer.render(scene, camera)
  };
  // 打印carmera 参数
  const printCameraInfo = () => {
    // fov, aspect, near, far
    console.log('fov:', camera.fov);
    console.log('aspect:', camera.aspect);
    console.log('near:', camera.near);
    console.log('far:', camera.far);
    console.log('position:', camera.position);
  };

  useEffect(() => {
    console.log(camera, scene, renderer);
    if (!camera) {
      initThree(cameraStateSnap);
      onResize();
    } else {
      rerenderCube(cameraStateSnap);
    }
  }, [cameraStateSnap]);
  return (
    <div>
      <h1 className={styles.title}>ThreeJs Cube demo1</h1>
      <ControlDrawer ref={controlDrawerRef} />
      <div>
        <Button onClick={openDrawer}>控制</Button>
        <Button onClick={printCameraInfo}>camera info</Button>
      </div>
      <div>{camera && JSON.parse(JSON.stringify(camera))}</div>
      <div id="three-demo1-scene"></div>
    </div>
  );
}
